<template>
  <div class="min-h-screen text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">

    <main class="relative z-10 px-6 pt-20 pb-20">
      <!-- 用户调试信息 -->
      <UserDebug v-if="authStore.isAuthenticated" />
      <!-- 文字介绍（顶部） -->
      <section class="max-w-4xl mx-auto text-center">
        <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight">
          <span class="bg-gradient-to-r from-white via-blue-200 to-cyan-300 bg-clip-text text-transparent">
            好电影，值得更好地被发现
          </span>
        </h1>
        <p class="mt-4 text-slate-300/90 text-base md:text-lg">
          我们用算法与数据，帮你从海量片库中精准发现喜好，三步直达内容：智能推荐、电影库、个人中心。
        </p>
      </section>
      <!-- 功能卡片横向排列 -->
      <section class="max-w-7xl mx-auto mt-10">
        <div class="grid grid-cols-3 gap-8 md:gap-10 lg:gap-14 cards-grid">
          <!-- 智能推荐卡片 -->
          <router-link to="/recommendations" class="group rounded-xl p-5 border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm hover:scale-[1.02] hover:shadow-xl hover:shadow-emerald-500/15">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg shadow-emerald-900/30 mb-3 group-hover:shadow-emerald-500/30 transition-shadow">
              <!-- Sparkles icon -->
              <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2-6 2 6-2 6-2-6zM3 12h2M19 12h2M6.05 6.05l1.4 1.4M16.55 16.55l1.4 1.4M17.95 6.05l-1.4 1.4M7.45 16.55l-1.4 1.4"/>
              </svg>
            </div>
            <h3 class="text-lg font-bold mb-1.5 group-hover:text-emerald-300 transition-colors">智能推荐</h3>
            <p class="text-slate-300/90 text-sm leading-relaxed">混合算法驱动，高匹配度个性推荐。</p>
          </router-link>

          <!-- 电影库卡片 -->
          <router-link to="/movies" class="group rounded-xl p-5 border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm hover:scale-[1.02] hover:shadow-xl hover:shadow-fuchsia-500/15">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-fuchsia-400 to-pink-500 flex items-center justify-center shadow-lg shadow-fuchsia-900/30 mb-3 group-hover:shadow-fuchsia-500/30 transition-shadow">
              <!-- Clapperboard icon -->
              <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 11h16v6a2 2 0 01-2 2H6a2 2 0 01-2-2v-6zm2-7l3 6m3-6l3 6"/>
              </svg>
            </div>
            <h3 class="text-lg font-bold mb-1.5 group-hover:text-pink-300 transition-colors">电影库</h3>
            <p class="text-slate-300/90 text-sm leading-relaxed">快速筛选直达心头好，探索无限可能。</p>
          </router-link>

          <!-- 个人中心卡片 -->
          <router-link to="/profile" class="group rounded-xl p-5 border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm hover:scale-[1.02] hover:shadow-xl hover:shadow-amber-500/15">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-amber-400 to-orange-500 flex items-center justify-center shadow-lg shadow-amber-900/30 mb-3 group-hover:shadow-amber-500/30 transition-shadow">
              <!-- User heart icon -->
              <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM5.5 20a6.5 6.5 0 0113 0M12 13c2 0 3 1.5 3 3 0 2-3 3-3 3s-3-1-3-3c0-1.5 1-3 3-3z"/>
              </svg>
            </div>
            <h3 class="text-lg font-bold mb-1.5 group-hover:text-amber-300 transition-colors">个人中心</h3>
            <p class="text-slate-300/90 text-sm leading-relaxed">沉淀观影记录与偏好，打造专属体验。</p>
          </router-link>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import UserDebug from '@/components/UserDebug.vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
</script>

<style scoped>
/* 卡片进场与悬浮特效 */
.cards-grid {
  perspective: 1000px;
}

.cards-grid > a {
  transform-style: preserve-3d;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  animation: card-in 600ms ease forwards;
}

.cards-grid > a:nth-child(1) { animation-delay: 60ms; }
.cards-grid > a:nth-child(2) { animation-delay: 140ms; }
.cards-grid > a:nth-child(3) { animation-delay: 220ms; }

@keyframes card-in {
  0% {
    transform: translateY(16px) rotateX(4deg) scale(0.98);
    opacity: 0;
  }
  60% {
    transform: translateY(-4px) rotateX(0deg) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    opacity: 1;
  }
}

.cards-grid > a:hover {
  transform: translateY(-4px) scale(1.02);
  transition: transform 220ms ease;
}

.cards-grid > a:active {
  transform: translateY(0) scale(0.99);
  transition: transform 120ms ease;
}
</style>